<script setup>
import { ref } from 'vue'
const data = ref([
  {
    id: 1,
    title: '自主研发',
    content: '我们具有经验丰富的软硬件及课程研发团队，与专业的工厂合作',
    boxbgi:
      'linear-gradient(160deg, rgb(111, 68, 234) 12.88%, rgb(151, 135, 255) 86.65%)',
    imgUrl: new URL('@/assets/aboutUs/floatbg1.png', import.meta.url)
  },
  {
    id: 2,
    title: '人工智能教育',
    content: '奋斗在人工智能编程落地中小学，已累计服务5000余所中小学',
    boxbgi:
      'linear-gradient(rgb(19, 160, 191) 0%, rgb(0, 167, 204) 0.01%, rgb(80, 190, 215) 100%)',
    imgUrl: new URL('@/assets/aboutUs/floatbg2.png', import.meta.url)
  },
  {
    id: 3,
    title: '专业客服',
    content: '坚持履行国家三包政策，对产品负责、提供给客户完整的服务体验',
    boxbgi:
      'linear-gradient(161deg, rgb(61, 136, 249) 12.12%, rgb(102, 191, 255) 86.9%)',
    imgUrl: new URL('@/assets/aboutUs/floatbg3.png', import.meta.url)
  }
])
</script>

<template>
  <div class="container">
    <div class="wrapper">
      <el-row>
        <el-col class="colItem" :span="8" v-for="item in data" :key="item.id">
          <div class="card-content">
            <div class="show1">
              <div class="text">
                <h2>{{ item.title }}</h2>
                <p>{{ item.content }}</p>
              </div>
            </div>
            <div class="show2" :style="{ backgroundImage: item.boxbgi }"></div>
            <img :src="item.imgUrl" alt="" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 100px 0;
  background-color: rgb(245, 245, 245);
}
.colItem {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-content {
  position: relative;
  width: 400px;
  height: 210px;
  background-image: none;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  border-radius: 40px;
  overflow: hidden;
  .show1 {
    position: absolute;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-left: 20px;
    .text {
      width: 70%;
      overflow: hidden;
      h2 {
        margin-bottom: 20px;
      }
    }
  }
  .show2 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    &:hover {
      opacity: 1;
    }
  }
  img {
    position: absolute;
    right: -40px;
    top: 23%;
    display: block;
    height: 110px;
    width: 110px;
    transition: all 0.3s ease-in-out;
    z-index: 2;
  }
  &:hover img {
    right: 10px;
  }
}
</style>
